/*eslint-disable*/
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
// @material-ui/icons
import Favorite from "@material-ui/icons/Favorite";
// core components
import Header from "pages-components/Header/Header.js";
import HeaderLinks from "pages-components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Parallax from "components/Parallax/Parallax.js";
import Button from "components/CustomButtons/Button.js";
// sections for this page
import SectionPills from "pages-sections/blog-posts/SectionPills.js";
import SectionInterested from "pages-sections/blog-posts/SectionInterested.js";
import SectionContact from "pages-sections/blog-posts/SectionContact.js";
import SectionBlogs from "pages-sections/blog-posts/SectionBlogs.js";
import blogPostsPageStyle from "assets/jss/nextjs-material-kit-pro/pages/blogPostsPageStyle.js";
// own
import { connect, useDispatch, useSelector } from "react-redux";
import { Creators as ArticleCreators } from "redux/actions/article";
import { getCookie } from "redux/api/cookie";
import { Creators as AuthCreators } from "redux/actions/auth";
import { END } from "redux-saga";

const useStyles = makeStyles(blogPostsPageStyle);
const limit = 1;

function BlogPostsPage({ posts, total, articles, loading }) {
  const [list, setList] = React.useState([]);

  React.useEffect(() => {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
    setList(posts);
  });
  const classes = useStyles();
  const dispatch = useDispatch();

  const onLoadMore = () => {
    dispatch(
      ArticleCreators.getListRequest({ page: list.length, limit: limit })
    );

    const data = list.concat(articles.data.article_list);
    console.log("加载更多后的newData:", data);
    setList(data);
    console.log("加载更多后的list:", list);
  };

  return (
    <div>
      <Header
        brand="YaK企业数字化转型研究所"
        links={<HeaderLinks dropdownHoverColor="info" />}
        fixed
        color="transparent"
        changeColorOnScroll={{
          height: 300,
          color: "info",
        }}
      />
      <Parallax image={require("assets/img/bg10.jpg")} filter="dark" small>
        <div className={classes.container}>
          <GridContainer justify="center">
            <GridItem xs={12} sm={12} md={8} className={classes.textCenter}>
              <h2 className={classes.title}>企业数字化转型相关文章</h2>
            </GridItem>
          </GridContainer>
        </div>
      </Parallax>
      <div className={classes.main}>
        <div className={classes.container}>
          {/* <SectionPills /> */}
          <SectionBlogs posts={list} count={total} />
          {!loading ? (
            total > list.length ? (
              <div
                style={{
                  textAlign: "center",
                  marginTop: 12,
                  height: 32,
                  lineHeight: "32px",
                }}
              >
                <Button color="transparent" onClick={onLoadMore}>
                  加载更多
                </Button>
              </div>
            ) : (
              <div
                style={{
                  textAlign: "center",
                  marginTop: 12,
                  height: 32,
                  lineHeight: "32px",
                }}
              >
                <Button color="transparent">已加载全部</Button>
              </div>
            )
          ) : null}
          <SectionInterested />
        </div>
        {/* <SectionImage /> */}
        {/* <SubscribeLine /> */}
        <SectionContact />
      </div>
      <Footer
        content={
          <div>
            <div className={classes.left}>
              <List className={classes.list}>
                <ListItem className={classes.inlineBlock}>
                  <a
                    href="https://www.oxyak.com:8080/index.html"
                    target="_blank"
                    className={classes.block}
                  >
                    YaK
                  </a>
                </ListItem>
                <ListItem className={classes.inlineBlock}>
                  <a
                    href="https://www.oxyak.com:8080/index.html"
                    target="_blank"
                    className={classes.block}
                  >
                    关于
                  </a>
                </ListItem>
                <ListItem className={classes.inlineBlock}>
                  <a
                    href="https://www.oxyak.com:8080/index.html"
                    className={classes.block}
                  >
                    博客
                  </a>
                </ListItem>
                <ListItem className={classes.inlineBlock}>
                  <a
                    href="https://www.oxyak.com:8080/index.html"
                    target="_blank"
                    className={classes.block}
                  >
                    隐私政策
                  </a>
                </ListItem>
              </List>
            </div>
            <div className={classes.right}>
              &copy; {1900 + new Date().getYear()} 沪ICP备17029056号{" "}
              <Favorite className={classes.icon} />{" "}
              <a href="https://www.oxyak.com:8080/index.html" target="_blank">
                YaK
              </a>{" "}
              服务于企业数字化转型.
            </div>
          </div>
        }
      />
    </div>
  );
}

BlogPostsPage.getInitialProps = async (ctx) => {
  // console.log("ctx====>", ctx);
  const { store, req } = ctx;
  console.log("store.getState().articleList", store.getState().articleList);
  const token = getCookie("access_token", req);
  store.dispatch(AuthCreators.getCheckAuth({ token: token }));
  store.dispatch(ArticleCreators.getListRequest({ page: 0, limit: limit }));
  store.dispatch(END);
  await store.sagaTask.toPromise();
  console.log("store.getState().articleList", store.getState().articleList);

  return {
    posts: store.getState().articleList.data.article_list,
    total: store.getState().articleList.data.total_count,
  };
};

const mapStateToProps = (state) => ({
  articles: state.articleList,
  loading: state.articleList.loading,
  error: state.articleList.error,
});

const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(BlogPostsPage);
